<template>
	<view class="wrap">
		<view class="u-icon-item" v-for="(item, index) in iconList" :key="index" @tap="selectIcon(item,index)">
			<view class="u-icon-id">{{index+1}}</view>
			<albb-icon :icon="item.name" size="80rpx" :color="item.color"></albb-icon>
			<view class="u-icon-name" :style="{'color':(item.color)}">{{item.name}}</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

				iconList: [{
						name: 'icon-descending'
					},
					{
						name: 'icon-fuwuguwen'
					},
					{
						name: 'icon-cut'
					},
					{
						name: 'icon-duanshipinhuati'
					},
					{
						name: 'icon-flashlight'
					},
					{
						name: 'icon-a-3Dhuichang'
					},
					{
						name: 'icon-filter-records'
					},
					{
						name: 'icon-dacuyouxian'
					},
					{
						name: 'icon-download'
					},
					{
						name: 'icon-gongyinglianfuwu'
					},
					{
						name: 'icon-copy'
					},
					{
						name: 'icon-gongyinglianyouxian'
					},
					{
						name: 'icon-calculator-fill'
					},
					{
						name: 'icon-haiyunyouxianquan'
					},
					{
						name: 'icon-gallery'
					},
					{
						name: 'icon-haiwaitequan'
					},
					{
						name: 'icon-good-fill'
					},
					{
						name: 'icon-huiyuanshoudanmanjian'
					},
					{
						name: 'icon-follow'
					},
					{
						name: 'icon-jinpinfuwubaogao'
					},
					{
						name: 'icon-follow-fill'
					},
					{
						name: 'icon-jinpinjulebu'
					},
					{
						name: 'icon-good'
					},
					{
						name: 'icon-jinpinzhuanxiang'
					},
					{
						name: 'icon-hot-for-ux-fill'
					},
					{
						name: 'icon-pinpaiguanggaoreci'
					},
					{
						name: 'icon-hot-for-atmosphere'
					},
					{
						name: 'icon-kehutong'
					},
					{
						name: 'icon-left'
					},
					{
						name: 'icon-a-pinzhengshangpin2'
					},
					{
						name: 'icon-list'
					},
					{
						name: 'icon-lvsehuanbaohuichang'
					},
					{
						name: 'icon-info-fill'
					},
					{
						name: 'icon-pinzhishangpinhuichang'
					},
					{
						name: 'icon-left-arrow'
					},
					{
						name: 'icon-quanqiuEzhanfapin'
					},
					{
						name: 'icon-night-mode-fill'
					},
					{
						name: 'icon-pinzhengshangpin'
					},
					{
						name: 'icon-lower-left-arrow'
					},
					{
						name: 'icon-rencaishuangxuanhui'
					},
					{
						name: 'icon-lock'
					},
					{
						name: 'icon-quanjingtu'
					},
					{
						name: 'icon-left-btn'
					},
					{
						name: 'icon-rengongkefu'
					},
					{
						name: 'icon-mute-fill'
					},
					{
						name: 'icon-shengyidai'
					},
					{
						name: 'icon-help-fill'
					},
					{
						name: 'icon-shiligongchang'
					},
					{
						name: 'icon-info'
					},
					{
						name: 'icon-shilikapian'
					},
					{
						name: 'icon-more'
					},
					{
						name: 'icon-shujucanmou'
					},
					{
						name: 'icon-loading'
					},
					{
						name: 'icon-shidirenzheng'
					},
					{
						name: 'icon-a-business-icon-Alibaba'
					},
					{
						name: 'icon-location-fill'
					},
					{
						name: 'icon-sousuopaixu'
					},
					{
						name: 'icon-a-business-icon-Bigpromotion'
					},
					{
						name: 'icon-mute'
					},
					{
						name: 'icon-siyoumojuhuichang'
					},
					{
						name: 'icon-business-icon-buyers-club-fill'
					},
					{
						name: 'icon-lock-fill'
					},
					{
						name: 'icon-wangshangdai'
					},
					{
						name: 'icon-business-icon-ali-clould'
					},
					{
						name: 'icon-link'
					},
					{
						name: 'icon-hangyejingzhengli'
					},
					{
						name: 'icon-a-business-icon-MOQ'
					},
					{
						name: 'icon-left-double-arrow'
					},
					{
						name: 'icon-hangyebaogao'
					},
					{
						name: 'icon-business-icon-buyers-club'
					},
					{
						name: 'icon-help'
					},
					{
						name: 'icon-zhengshuyanzhen'
					},
					{
						name: 'icon-a-business-icon-gold-supplier2'
					},
					{
						name: 'icon-move'
					},
					{
						name: 'icon-wangpuzhuangxiu'
					},
					{
						name: 'icon-business-icon-feeds'
					},
					{
						name: 'icon-mute-btn'
					},
					{
						name: 'icon-hangyehuodong'
					},
					{
						name: 'icon-business-icon-gold-supplier'
					},
					{
						name: 'icon-location'
					},
					{
						name: 'icon-zhuanshuchangjing'
					},
					{
						name: 'icon-business-icon-feeds-logo-fill'
					},
					{
						name: 'icon-left-btn-fill'
					},
					{
						name: 'icon-youzhimaoyiqu'
					},
					{
						name: 'icon-business-icon-feeds-fill'
					},
					{
						name: 'icon-notice-fill'
					},
					{
						name: 'icon-zhuanshujingli'
					},
					{
						name: 'icon-business-icon-feeds-logo'
					},
					{
						name: 'icon-lower-right-arrow'
					},
					{
						name: 'icon-showroom'
					},
					{
						name: 'icon-business-icon-festivals'
					},
					{
						name: 'icon-hot-for-ux'
					},
					{
						name: 'icon-SDKhuichang'
					},
					{
						name: 'icon-business-icon-rfq-word'
					},
					{
						name: 'icon-hide'
					},
					{
						name: 'icon-WDhuodong'
					},
					{
						name: 'icon-business-icon-vs'
					},
					{
						name: 'icon-mute-btn-fill'
					},
					{
						name: 'icon-yanchangshipin'
					},
					{
						name: 'icon-business-icon-vs-fill'
					},
					{
						name: 'icon-play-fill'
					},
					{
						name: 'icon-zhuanshufuwu'
					},
					{
						name: 'icon-business-icon-trade-assurance-fill'
					},
					{
						name: 'icon-night-mode'
					},
					{
						name: 'icon-business-rfq'
					},
					{
						name: 'icon-a-business-MYbank'
					},
					{
						name: 'icon-reduce-btn-fill'
					},
					{
						name: 'icon-layers'
					},
					{
						name: 'icon-cart-add'
					},
					{
						name: 'icon-play'
					},
					{
						name: 'icon-layered-configuration'
					},
					{
						name: 'icon-business-icon-two-years'
					},
					{
						name: 'icon-notice'
					},
					{
						name: 'icon-a-expressdiscount'
					},
					{
						name: 'icon-business-icon-sales-center'
					},
					{
						name: 'icon-right'
					},
					{
						name: 'icon-send-fill'
					},
					{
						name: 'icon-business-icon-OEM'
					},
					{
						name: 'icon-reduce'
					},
					{
						name: 'icon-a-ImageProcessing'
					},
					{
						name: 'icon-a-business-icon-weeklyDeals'
					},
					{
						name: 'icon-right-btn-fill'
					},
					{
						name: 'icon-a-videogeneration'
					},
					{
						name: 'icon-business-icon-sales-center-fill'
					},
					{
						name: 'icon-reduce-btn'
					},
					{
						name: 'icon-translate'
					},
					{
						name: 'icon-business-icon-rfq-word-fill'
					},
					{
						name: 'icon-right-btn'
					},
					{
						name: 'icon-a-commandinquiry-fill'
					},
					{
						name: 'icon-business-icon-trade-assurance'
					},
					{
						name: 'icon-selected'
					},
					{
						name: 'icon-a-titleoptimization'
					},
					{
						name: 'icon-cart-add-fill'
					},
					{
						name: 'icon-search-for-similar'
					},
					{
						name: 'icon-AI-money'
					},
					{
						name: 'icon-business-icon-one-touch'
					},
					{
						name: 'icon-remind-fill'
					},
					{
						name: 'icon-a-New-outline3'
					},
					{
						name: 'icon-business-icon-two-years-fill'
					},
					{
						name: 'icon-right-arrow'
					},
					{
						name: 'icon-change'
					},
					{
						name: 'icon-cart-full-fill'
					},
					{
						name: 'icon-remind-btn-fill'
					},
					{
						name: 'icon-catalog-check'
					},
					{
						name: 'icon-return'
					},
					{
						name: 'icon-catalog-check-fill'
					},
					{
						name: 'icon-search'
					},
					{
						name: 'icon-catalog-fill'
					},
					{
						name: 'icon-remind'
					},
					{
						name: 'icon-charts-line'
					},
					{
						name: 'icon-remind-btn'
					},
					{
						name: 'icon-cart-full'
					},
					{
						name: 'icon-scan'
					},
					{
						name: 'icon-cart-search'
					},
					{
						name: 'icon-right-double-arrow'
					},
					{
						name: 'icon-cart-empty'
					},
					{
						name: 'icon-smile-fill'
					},
					{
						name: 'icon-cart-empty-fill'
					},
					{
						name: 'icon-settings-fill'
					},
					{
						name: 'icon-catalog'
					},
					{
						name: 'icon-share'
					},
					{
						name: 'icon-charts-pie'
					},
					{
						name: 'icon-smile'
					},
					{
						name: 'icon-catalog-download'
					},
					{
						name: 'icon-settings'
					},
					{
						name: 'icon-charts-curve'
					},
					{
						name: 'icon-a-sorting2'
					},
					{
						name: 'icon-charts-bar'
					},
					{
						name: 'icon-stop-fill'
					},
					{
						name: 'icon-cart-search-fill'
					},
					{
						name: 'icon-stop'
					},
					{
						name: 'icon-costoms'
					},
					{
						name: 'icon-sorting'
					},
					{
						name: 'icon-catalog-download-fill'
					},
					{
						name: 'icon-success-fill'
					},
					{
						name: 'icon-customer-businessman-fill'
					},
					{
						name: 'icon-suspend-fill'
					},
					{
						name: 'icon-customer-add'
					},
					{
						name: 'icon-success'
					},
					{
						name: 'icon-customer-bussinessman'
					},
					{
						name: 'icon-suspend'
					},
					{
						name: 'icon-customer-add-fill'
					},
					{
						name: 'icon-unlock-fill'
					},
					{
						name: 'icon-customer-certified'
					},
					{
						name: 'icon-unlock'
					},
					{
						name: 'icon-customer-certified-fill'
					},
					{
						name: 'icon-up-arrow'
					},
					{
						name: 'icon-customer-center'
					},
					{
						name: 'icon-up-btn-fill'
					},
					{
						name: 'icon-customer-filter-fill'
					},
					{
						name: 'icon-up-btn'
					},
					{
						name: 'icon-customer-fill'
					},
					{
						name: 'icon-up'
					},
					{
						name: 'icon-customer-fee'
					},
					{
						name: 'icon-upload'
					},
					{
						name: 'icon-customer-filter'
					},
					{
						name: 'icon-upper-right-arrow'
					},
					{
						name: 'icon-customer-group-fill'
					},
					{
						name: 'icon-volume-btn-fill'
					},
					{
						name: 'icon-customer-group'
					},
					{
						name: 'icon-view'
					},
					{
						name: 'icon-customs-clearance'
					},
					{
						name: 'icon-view-fill'
					},
					{
						name: 'icon-customer-search'
					},
					{
						name: 'icon-upper-left-arrow'
					},
					{
						name: 'icon-editor-background-color'
					},
					{
						name: 'icon-volume-fill'
					},
					{
						name: 'icon-editor-add-cell'
					},
					{
						name: 'icon-volume'
					},
					{
						name: 'icon-customer-official'
					},
					{
						name: 'icon-volume-btn'
					},
					{
						name: 'icon-customer-official-fill'
					},
					{
						name: 'icon-warning-fill'
					},
					{
						name: 'icon-customer-management'
					},
					{
						name: 'icon-zoom-out-fill'
					},
					{
						name: 'icon-editor-center-alignment'
					},
					{
						name: 'icon-warning'
					},
					{
						name: 'icon-editor-eraser'
					},
					{
						name: 'icon-zoom-in'
					},
					{
						name: 'icon-editor-background'
					},
					{
						name: 'icon-zoom-out'
					},
					{
						name: 'icon-editor-bold'
					},
					{
						name: 'icon-zoom-in-fill'
					},
					{
						name: 'icon-customs-clearance-data'
					},
					{
						name: 'icon-address-book-fill'
					},
					{
						name: 'icon-customer'
					},
					{
						name: 'icon-all-fill'
					},
					{
						name: 'icon-customer-interests'
					},
					{
						name: 'icon-all'
					},
					{
						name: 'icon-editor-italic'
					},
					{
						name: 'icon-address-book'
					},
					{
						name: 'icon-editor-reduce-cell'
					},
					{
						name: 'icon-application-record'
					},
					{
						name: 'icon-editor-filling'
					},
					{
						name: 'icon-association'
					},
					{
						name: 'icon-editor-four-column'
					},
					{
						name: 'icon-assessed-badge'
					},
					{
						name: 'icon-editor-subscript'
					},
					{
						name: 'icon-camera-fill'
					},
					{
						name: 'icon-editor-three-column'
					},
					{
						name: 'icon-camera-switching-fill'
					},
					{
						name: 'icon-editor-right-alignment'
					},
					{
						name: 'icon-camera'
					},
					{
						name: 'icon-editor-left-alignment'
					},
					{
						name: 'icon-cascades'
					},
					{
						name: 'icon-editor-under-line'
					},
					{
						name: 'icon-category-add'
					},
					{
						name: 'icon-editor-superscript'
					},
					{
						name: 'icon-camera-switching'
					},
					{
						name: 'icon-editor-text'
					},
					{
						name: 'icon-category'
					},
					{
						name: 'icon-format-exl'
					},
					{
						name: 'icon-checkstand'
					},
					{
						name: 'icon-format-bmp'
					},
					{
						name: 'icon-click'
					},
					{
						name: 'icon-editor-rotate'
					},
					{
						name: 'icon-code'
					},
					{
						name: 'icon-format-doc'
					},
					{
						name: 'icon-computer-fill'
					},
					{
						name: 'icon-editor-tag-subscript'
					},
					{
						name: 'icon-component'
					},
					{
						name: 'icon-format-gif'
					},
					{
						name: 'icon-computer'
					},
					{
						name: 'icon-format-tif'
					},
					{
						name: 'icon-company-fill'
					},
					{
						name: 'icon-goods-add'
					},
					{
						name: 'icon-conditions'
					},
					{
						name: 'icon-goods-inspection-fill'
					},
					{
						name: 'icon-coupon-fill'
					},
					{
						name: 'icon-format-txt'
					},
					{
						name: 'icon-connections'
					},
					{
						name: 'icon-goods-inspection'
					},
					{
						name: 'icon-company'
					},
					{
						name: 'icon-goods-start-to-ship'
					},
					{
						name: 'icon-coupon'
					},
					{
						name: 'icon-format-xlsx'
					},
					{
						name: 'icon-communicate-fill'
					},
					{
						name: 'icon-goods-add-fill'
					},
					{
						name: 'icon-credit-level-fill'
					},
					{
						name: 'icon-logistics-container'
					},
					{
						name: 'icon-communicate'
					},
					{
						name: 'icon-format-pdf'
					},
					{
						name: 'icon-credit-level'
					},
					{
						name: 'icon-format-jpeg'
					},
					{
						name: 'icon-customer-service-fill'
					},
					{
						name: 'icon-format-png'
					},
					{
						name: 'icon-customer-service-24hour-fill'
					},
					{
						name: 'icon-logistics-airfreight'
					},
					{
						name: 'icon-customer-service-24hour'
					},
					{
						name: 'icon-goods'
					},
					{
						name: 'icon-customer-service'
					},
					{
						name: 'icon-goods-fill'
					},
					{
						name: 'icon-customization-fill'
					},
					{
						name: 'icon-goods-start-to-ship-fill'
					},
					{
						name: 'icon-customization'
					},
					{
						name: 'icon-logistics-data-fill'
					},
					{
						name: 'icon-decorate-fill'
					},
					{
						name: 'icon-logistics-picked-up'
					},
					{
						name: 'icon-decorate'
					},
					{
						name: 'icon-logistics-airfreight-fill'
					},
					{
						name: 'icon-discount-fill'
					},
					{
						name: 'icon-logistics-land-transport-fill'
					},
					{
						name: 'icon-discount'
					},
					{
						name: 'icon-logistics-ocean-shipping'
					},
					{
						name: 'icon-document-conversion'
					},
					{
						name: 'icon-logistics-data'
					},
					{
						name: 'icon-double-censorship'
					},
					{
						name: 'icon-format-zip'
					},
					{
						name: 'icon-flag'
					},
					{
						name: 'icon-logistics-warehouse-fill'
					},
					{
						name: 'icon-folder-fill'
					},
					{
						name: 'icon-message-comments-fill'
					},
					{
						name: 'icon-email-fill'
					},
					{
						name: 'icon-logistics-warehouse'
					},
					{
						name: 'icon-flag-fill'
					},
					{
						name: 'icon-logistics-storehouse'
					},
					{
						name: 'icon-folder'
					},
					{
						name: 'icon-message-language'
					},
					{
						name: 'icon-global-fill'
					},
					{
						name: 'icon-message-reply-template'
					},
					{
						name: 'icon-email'
					},
					{
						name: 'icon-logistics-ocean-shipping-fill'
					},
					{
						name: 'icon-global-trade-fill'
					},
					{
						name: 'icon-message-multi-language-fill'
					},
					{
						name: 'icon-export-service'
					},
					{
						name: 'icon-logistics-tracking-fill'
					},
					{
						name: 'icon-global-trade'
					},
					{
						name: 'icon-message-comments'
					},
					{
						name: 'icon-fair'
					},
					{
						name: 'icon-message-multi-language'
					},
					{
						name: 'icon-earth'
					},
					{
						name: 'icon-logistics-tracking'
					},
					{
						name: 'icon-guide'
					},
					{
						name: 'icon-message-reply-template-fill'
					},
					{
						name: 'icon-home-fill'
					},
					{
						name: 'icon-logistics-land-transport'
					},
					{
						name: 'icon-home'
					},
					{
						name: 'icon-message-send-inquiry'
					},
					{
						name: 'icon-homepage-ads-fill'
					},
					{
						name: 'icon-money-credit-card-fill'
					},
					{
						name: 'icon-homepage-ads'
					},
					{
						name: 'icon-money-credit-card'
					},
					{
						name: 'icon-honor-fill'
					},
					{
						name: 'icon-money-bank-fill'
					},
					{
						name: 'icon-global'
					},
					{
						name: 'icon-message-send-inquiry-fill'
					},
					{
						name: 'icon-honor'
					},
					{
						name: 'icon-money-dollar-symbol'
					},
					{
						name: 'icon-image-text-fill'
					},
					{
						name: 'icon-money-asp'
					},
					{
						name: 'icon-invoice'
					},
					{
						name: 'icon-money-dollar'
					},
					{
						name: 'icon-image-text'
					},
					{
						name: 'icon-money-bank'
					},
					{
						name: 'icon-lable'
					},
					{
						name: 'icon-money-exchange-data'
					},
					{
						name: 'icon-monitor'
					},
					{
						name: 'icon-money-currency-converter-fill'
					},
					{
						name: 'icon-live-fill'
					},
					{
						name: 'icon-money-finance-seller-fill'
					},
					{
						name: 'icon-live'
					},
					{
						name: 'icon-money-fee'
					},
					{
						name: 'icon-layers-fill'
					},
					{
						name: 'icon-money-currency-converter'
					},
					{
						name: 'icon-monitor-fill'
					},
					{
						name: 'icon-money-exchange-settlement'
					},
					{
						name: 'icon-mobile-phone'
					},
					{
						name: 'icon-money-quick-refund-plan'
					},
					{
						name: 'icon-name-card'
					},
					{
						name: 'icon-money-finance-buyer-fill'
					},
					{
						name: 'icon-listening-fill'
					},
					{
						name: 'icon-money-rmb'
					},
					{
						name: 'icon-name-card-fill'
					},
					{
						name: 'icon-money-tax-refund'
					},
					{
						name: 'icon-new'
					},
					{
						name: 'icon-money-rmb-symbol'
					},
					{
						name: 'icon-mobile-phone-btn'
					},
					{
						name: 'icon-money-red-packet-fill'
					},
					{
						name: 'icon-one-stop-service'
					},
					{
						name: 'icon-money-rmb-fill'
					},
					{
						name: 'icon-pad'
					},
					{
						name: 'icon-money-wallet-fill'
					},
					{
						name: 'icon-pcm'
					},
					{
						name: 'icon-money-exchange-rate'
					},
					{
						name: 'icon-Panorama'
					},
					{
						name: 'icon-money-funds'
					},
					{
						name: 'icon-phone-fill'
					},
					{
						name: 'icon-money-inquiry-template'
					},
					{
						name: 'icon-phone'
					},
					{
						name: 'icon-money-red-packet'
					},
					{
						name: 'icon-picture-search'
					},
					{
						name: 'icon-money-finance-buyer'
					},
					{
						name: 'icon-picture-fill'
					},
					{
						name: 'icon-money-inquiry-template-fill'
					},
					{
						name: 'icon-picture'
					},
					{
						name: 'icon-money-finance-seller'
					},
					{
						name: 'icon-pictures-fill'
					},
					{
						name: 'icon-a-money-quick-refund-plan2'
					},
					{
						name: 'icon-listening'
					},
					{
						name: 'icon-money-tax-rebate'
					},
					{
						name: 'icon-print'
					},
					{
						name: 'icon-order-inspection-fill'
					},
					{
						name: 'icon-pin-fill'
					},
					{
						name: 'icon-order-fill'
					},
					{
						name: 'icon-protection-fill'
					},
					{
						name: 'icon-money-wallet'
					},
					{
						name: 'icon-professional'
					},
					{
						name: 'icon-order-upload'
					},
					{
						name: 'icon-qr-code'
					},
					{
						name: 'icon-product-filter'
					},
					{
						name: 'icon-print-fill'
					},
					{
						name: 'icon-order-success'
					},
					{
						name: 'icon-protection'
					},
					{
						name: 'icon-order'
					},
					{
						name: 'icon-pin'
					},
					{
						name: 'icon-order-inspection'
					},
					{
						name: 'icon-pictures'
					},
					{
						name: 'icon-product-checked'
					},
					{
						name: 'icon-post'
					},
					{
						name: 'icon-order-manage'
					},
					{
						name: 'icon-quick-fill'
					},
					{
						name: 'icon-order-success-fill'
					},
					{
						name: 'icon-quick'
					},
					{
						name: 'icon-order-rejected-fill'
					},
					{
						name: 'icon-ranking-list-fill'
					},
					{
						name: 'icon-product-get-catalog-fill'
					},
					{
						name: 'icon-reads'
					},
					{
						name: 'icon-order-manage-fill'
					},
					{
						name: 'icon-response'
					},
					{
						name: 'icon-product-checked-fill'
					},
					{
						name: 'icon-save-fill'
					},
					{
						name: 'icon-money-transfer'
					},
					{
						name: 'icon-response-fill'
					},
					{
						name: 'icon-order-location'
					},
					{
						name: 'icon-save'
					},
					{
						name: 'icon-product-fill'
					},
					{
						name: 'icon-scenes-fill'
					},
					{
						name: 'icon-product-list-fill'
					},
					{
						name: 'icon-ranking-list'
					},
					{
						name: 'icon-order-location-fill'
					},
					{
						name: 'icon-scenes'
					},
					{
						name: 'icon-product-filter-fill'
					},
					{
						name: 'icon-point-right'
					},
					{
						name: 'icon-order-rejected'
					},
					{
						name: 'icon-security-fill'
					},
					{
						name: 'icon-time-history'
					},
					{
						name: 'icon-shopping'
					},
					{
						name: 'icon-time-ontime'
					},
					{
						name: 'icon-shopping-fill'
					},
					{
						name: 'icon-time'
					},
					{
						name: 'icon-security'
					},
					{
						name: 'icon-time-task-fill'
					},
					{
						name: 'icon-self-operated-business'
					},
					{
						name: 'icon-product-loaction-fill'
					},
					{
						name: 'icon-shut-down'
					},
					{
						name: 'icon-product-loaction'
					},
					{
						name: 'icon-square'
					},
					{
						name: 'icon-product'
					},
					{
						name: 'icon-a-sharelive'
					},
					{
						name: 'icon-product-list'
					},
					{
						name: 'icon-sign-board'
					},
					{
						name: 'icon-time-fill'
					},
					{
						name: 'icon-sign-board-fill'
					},
					{
						name: 'icon-time-response'
					},
					{
						name: 'icon-a-sharelive-fill'
					},
					{
						name: 'icon-product-get-catalog'
					},
					{
						name: 'icon-stamping-service'
					},
					{
						name: 'icon-time-task'
					},
					{
						name: 'icon-store-fill'
					},
					{
						name: 'icon-add-btn-fill'
					},
					{
						name: 'icon-suggest'
					},
					{
						name: 'icon-add-btn'
					},
					{
						name: 'icon-survey'
					},
					{
						name: 'icon-add'
					},
					{
						name: 'icon-store'
					},
					{
						name: 'icon-ascending'
					},
					{
						name: 'icon-table-fill'
					},
					{
						name: 'icon-atm-away-fill'
					},
					{
						name: 'icon-table'
					},
					{
						name: 'icon-atm-fill'
					},
					{
						name: 'icon-tap'
					},
					{
						name: 'icon-atm-away'
					},
					{
						name: 'icon-teaching'
					},
					{
						name: 'icon-atm'
					},
					{
						name: 'icon-template-fill'
					},
					{
						name: 'icon-attachent'
					},
					{
						name: 'icon-tool-fill'
					},
					{
						name: 'icon-bad-fill'
					},
					{
						name: 'icon-training-fill'
					},
					{
						name: 'icon-bad'
					},
					{
						name: 'icon-tool'
					},
					{
						name: 'icon-cry'
					},
					{
						name: 'icon-template-success-fill'
					},
					{
						name: 'icon-error'
					},
					{
						name: 'icon-template-success'
					},
					{
						name: 'icon-down-arrow'
					},
					{
						name: 'icon-training'
					},
					{
						name: 'icon-delete-fill'
					},
					{
						name: 'icon-template'
					},
					{
						name: 'icon-calendar'
					},
					{
						name: 'icon-top-raning-fill'
					},
					{
						name: 'icon-down-btn-fill'
					},
					{
						name: 'icon-top-raning'
					},
					{
						name: 'icon-cry-fill'
					},
					{
						name: 'icon-trust-fill'
					},
					{
						name: 'icon-daytime-mode'
					},
					{
						name: 'icon-upload-btn'
					},
					{
						name: 'icon-down-btn'
					},
					{
						name: 'icon-trade-alert'
					},
					{
						name: 'icon-filter-fill'
					},
					{
						name: 'icon-trust'
					},
					{
						name: 'icon-error-fill'
					},
					{
						name: 'icon-user-defined-fill'
					},
					{
						name: 'icon-filter'
					},
					{
						name: 'icon-user-defined'
					},
					{
						name: 'icon-filter-records-fill'
					},
					{
						name: 'icon-video-fill'
					},
					{
						name: 'icon-favorites-fill'
					},
					{
						name: 'icon-video'
					},
					{
						name: 'icon-calendar-fill'
					},
					{
						name: 'icon-vip-fill'
					},
					{
						name: 'icon-edit'
					},
					{
						name: 'icon-vip-management'
					},
					{
						name: 'icon-flashlight-auto'
					},
					{
						name: 'icon-vip'
					},
					{
						name: 'icon-calculator'
					},
					{
						name: 'icon-vr-fill'
					},
					{
						name: 'icon-confirm'
					},
					{
						name: 'icon-vr-video-fill'
					},
					{
						name: 'icon-favorites'
					},
					{
						name: 'icon-vr-video'
					},
					{
						name: 'icon-daytime-mode-fill'
					},
					{
						name: 'icon-writing-fill'
					},
					{
						name: 'icon-down'
					},
					{
						name: 'icon-writing'
					},
					{
						name: 'icon-close'
					},
					{
						name: 'icon-wifi'
					},
					{
						name: 'icon-flashlight-turned-off'
					},
					{
						name: 'icon-chengchangzhiyin'
					},
					{
						name: 'icon-delete'
					},
					{
						name: 'icon-changjingliuliang'
					},

				]
			};
		},
		onShow() {
			this.getData()
		},
		methods: {
			getData() {
				this.iconList.sort(function(s1, s2) {
					// console.log(s1.name);
					let x1 = s1.name.toUpperCase();
					// console.log(x1);
					let x2 = s2.name.toUpperCase();
					if (x1 < x2) {
						return -1;
					}
					if (x1 > x2) {
						return 1;
					}
					return 0;
				});
				// this.iconList.map((item, index) => {
				// 	item.color = this.getRandomColor();
				// 	return item
				// })

			},
			selectIcon(item, index) {
				// console.log(item);
				// // #ifdef H5
				// return this.$u.toast('H5暂不支持复制');
				// // #endif
				uni.setClipboardData({
					data: item.name,
					success: () => {
						item.color = this.getRandomColor();
						this.iconList.splice()
					}
				});
				uni.hideToast()
				this.$u.toast(item.name);
			},

			getRandomColor() {
				// 随机生成颜色
				const letters = '0123456789ABCDEF';
				let color = '#';
				for (let i = 0; i < 6; i++) {
					color += letters[Math.floor(Math.random() * 16)];
				}
				return color;
			},
		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		padding: 24rpx;
	}

	.inner-wrap {
		display: flex;
		flex-wrap: wrap;
	}

	.u-icon-item {
		display: flex;
		align-items: center;
		padding: 10rpx 0;
		background-color: white;
		margin-bottom: 10rpx;
		border-radius: 10rpx;
	}

	.u-icon-id {
		width: 60rpx;
		margin-right: 10rpx;
		text-align: right;
	}

	.u-icon-name {
		color: $u-tips-color;
		word-wrap: break-word;
		word-break: break-all;
		font-size: 26rpx;
		padding: 0 14rpx;
		// 给定高度是为了图标名超出一行时，进行换行能有更好的效果
	}
</style>